<template>
    <el-dialog v-model="dialogFormVisible" title="关联用户">
        <el-transfer v-model="include" filterable :filter-method="filterMethod" filter-placeholder="请输入用户名查询"
            :data="allData" :titles="['所用用户', '已关联用户']" :props="props" v-loading="isLoading" />
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">返回</el-button>
                <el-button :disabled="isLoading" type="primary" @click="relevanceUser">确认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup name="relevanceUser">
import { ref } from 'vue'
import api from "@/api"
import { ElMessage } from 'element-plus'

const isLoading = ref(false)
const dialogFormVisible = ref(false)
const include = ref([])
const allData = ref([])
const roleId = ref('')

const props = {
    key: "userId",
    label: "username",
}
const init = async (id) => {
    isLoading.value = true
    dialogFormVisible.value = true
    roleId.value = id
    const res = await api.post('/author/role/relevanceUserInfo', { roleId: id })
    if (res.data.code === 200) {
        allData.value = res.data.data.allUsers
        include.value = res.data.data.includeUsers
    } else {
        ElMessage.error(res.data.msg)
    }
    isLoading.value = false
}

const filterMethod = (query, item) => {
    return item.username.includes(query)
}
const relevanceUser = async () => {
    isLoading.value = true
    const params = new Map()
    params.set(roleId.value, include.value)
    const res = await api.post('/author/role/relevanceUser', Object.fromEntries(params))
    if (res.data.code === 200) {
        ElMessage.success(res.data.msg)
        dialogFormVisible.value = false
    } else {
        ElMessage.error(res.data.msg)
    }
    isLoading.value = false
}
defineExpose({
    init
});
</script>
<style scoped lang="less"></style>